En muchas ocasiones hay la necesidad de hacer pequeñas animaciones y generalmente esta se hace usando keyFrames. Pero existe una alternativa para hacer animaciones con código ActionScript y esta es la clase: Tween.
La clase Tween nos permitirá manipular las propiedades del movieClip como la posición, altura, etc. Se puede especificar si la animación será por tiempo o por frames por segundo (fps). Además de ello brinda distintos tipos de aceleración para lograr un efecto más real.
Para hacer uso de la clase Tween, hay que incluirla en nuestro fla antes de usarlo y esto se hace de la siguiente manera:
[as]import mx.transitions.Tween;[/as]
Luego podemos hacer uso de la clase haciendo uso de los siguientes parámetros:
[as]Tween(objeto, «prop», func, ini, fin, duracion, tipo);[/as]
Donde se tiene:
- objeto: El movieClip al que se modificarán las propiedades.
- prop: Una cadena con la propiedad del movieClip a se animada.
- func: Es el método de transición usado en la animación.
- ini: un número que indica el valor inicial de prop.
- fin: un número que indica el valor final de prop.
- duracion: Un número que indica la duración de la animación.
- tipo: indica si se usaran segundos o frames para la animación.
Veamos un pequeño ejemplo del uso de la clase Tween. Primero crearemos un archivo nuevo llamado tween1.fla. Dentro de este archivo creamos 2 movieClip, un circulo llamado movie y un botón llamado botón. El botón lo usaremos para iniciar la animación.
[as]
import mx.transitions.Tween;
// ———————–
var func = mx.transitions.easing.Regular.easeIn;
boton.onPress = function() {
var mTw = new Tween(movie, «_x», func, 65, 380, .5, true);
}
stop();
[/as]
[swf]/wp-content/uploads/2006/06/tween1.swf, 432, 60[/swf]
Pra este ejemplo hemos usado el método de transición Regular pero se tienen otros tipos de métodos de transición. Entre ellos se tiene:
- Back: Extiende la animación con un efecto de rebote en la misma ventana.
- Bounce: Agrega un efecto de retardo en el rango de transición.
- Elastic: Añade un efecto elástico al final de la animación.
- Regular: Agregar movimiento lento del inicio al fin.
- Strong: Agrega aceleración al inicio y final.
- None: Agrega igual movimiento desde el inicio al fin.
Cada uno de estos tipos de transición tiene los siguientes métodos que controlarán su comportamiento.
- easeIn: Brinda el efecto de aceleración al inicio de la transición.
- easeOut: Brinda el efecto de aceleración al final de la transición.
- easeInOut: Agregara el efecto de aceleración al inicio y final de la aceleración.
- easeNone: Ningún efecto de aceleración se agrega.
Veamos ahora algunos ejemplos:
[as]
import mx.transitions.Tween;
// ———————–
var func = mx.transitions.easing.Bounce.easeOut;
boton.onPress = function() {
var mTw = new Tween(movie, «_x», func, 65, 380, .5, true);
}
stop();
[/as]
[swf]/wp-content/uploads/2006/06/tween1a.swf, 432, 60[/swf]
Ahora, además de las características antes vistas, esta clase provee funciones para detectar diferentes eventos. Por ejemplo el método onMotionFinished el cual detecta el final de la animación. Veamos un ejemplo.
[as]
import mx.transitions.Tween;
var func = mx.transitions.easing.Regular.easeIn;
boton.onPress = function() {
var myTw = new Tween(movie, «_x», func, 65, 380, .5, true);
myTw.onMotionFinished = function() {
new Tween(movie, «_x», func, 380, 65, .5, true);
}
}
stop();
[/as]
[swf]/wp-content/uploads/2006/06/tween2.swf, 432, 60[/swf]
Finalmente veamos un ejemplo con el cambio de tamaño de un botón.
[as]
import mx.transitions.Tween;
// ———————–
var func = mx.transitions.easing.Regular.easeOut;
var myFormat:TextFormat = new TextFormat();
myFormat.align = «center»;
texto.text = «OPEN MENU»;
texto.setTextFormat(myFormat);
menu.sopen = false;
menu.onPress = function() {
if (!this.sopen) {
new Tween(menu, «_width», func, 108, 388, .5, true);
this.sopen = true;
texto.text = «CLOSE MENU»;
texto.setTextFormat(myFormat);
} else {
new Tween(menu, «_width», func, 388, 108, .5, true);
this.sopen = false;
texto.text = «OPEN MENU»;
texto.setTextFormat(myFormat);
}
}
[/as]
[swf]/wp-content/uploads/2006/06/tween3.swf, 432, 60[/swf]
Finalemente les dejamos para descargar todos los archivos de este post.
Comentarios Total 21 comentarios
Publicado: 04/07/2006 11:40 am
realmente muy bueno, muy claro y facil de seguir, buen trabajo
Publicado: 01/08/2006 3:12 pm
Muy bueno… =)
Publicado: 03/09/2006 9:06 pm
No se puede descargar los archivos de este artículo (Tween Class en ActionScript).
Sería posible reparar este enlace?.
Gracias.
Publicado: 22/01/2007 11:16 am
no entiendo nada… donde pego cada cosa?¿, por favor explicar. soy muy novato
pol
Publicado: 14/06/2007 11:42 pm
Existe alguna manera de controlar de mejor manera las animaciones hechas con Tween, ya que estoy haciedo un menú, con animaciones en Tween, pero derepente se quedan congeladas las imagenes hasta posicionar el ratón en otro botón
Publicado: 15/06/2007 11:06 am
Seguramente es por que estas consumiendo muchos recursos de tu PC, optimiza un poco tu código y no coloques muchos Tweens a la vez, con eso funcionará correctamente.
Publicado: 10/07/2007 8:04 am
unijimpe, te felicito por la información publicada. Cada vez que indago mas y mas en el código ActionScript, me impresiona lo tan robusto y versatil que es.
Saludos
Publicado: 14/09/2007 8:05 pm
Muy buenos ejemplos!!!
una consulta:
si le quiero aplicar «alpha» para q al dar click en el «boton» aparezca de 0 a 100, como lo hago?
gracia y cheve el blog!!!
Publicado: 11/06/2008 3:33 pm
Muy buenos ejemplos, pero hay alguna manera de hacerlo sin usar un botón, y que la animación aparezca cuando se carga el swf.??
Publicado: 08/07/2008 5:18 pm
Muy bueno, mis felicitaciones por el blog :D
Una unica sugerencia. En el ultimo ejemplo que pusistes recomiendo poner:
new Tween(menu, «_width», func, _WITH, 388, .5, true);
En las dos partes que aparece el Tween, ya que si yo apreto en el boton cuando se esta abriendo el efecto aparece desde el punto exacto en el que el boton fue apretado, de otra forma iria a donde se le dijo.
Para responder a Daniel Medi, Usar dentro de un moviclip en el primer frame on(EnterFrame) u on(load)
Saludos :D
Publicado: 11/12/2008 8:11 pm
Re-claro el tutorial. Gracias!
Mi duda es: esta línea «import mx.transitions.Tween;» que llama a tween.as, «copia» el código en el archivo .fla o tengo que incluir el tween.as si genero un exe para un CD?
Gracias!!
Publicado: 12/12/2008 10:38 pm
Se podría decir que adjunta el código que hay en el archivo .as, lo compila es decir genera una archivo que se puede ejecutar sin necesidad de tener los archivos fuente. Entonces no es necesario incluir los archivos .as en tus CDs, para el funcionamiento solo es necesario los SWFs.
Publicado: 15/06/2009 5:57 pm
na pregunta como ago un boton para para una paginacion automatica
Publicado: 28/09/2009 8:47 am
muy bueno!..
me has aclarado muchas cosas!
mil gracias!
Publicado: 28/09/2009 9:21 am
:S..
me funciona perfectamente.. pero he tenido problemas en que uso una forma (una forma cualquiera) … se pixela muy feo.. o sea al momento de cambiar de tamaño cabmbia totalmente
Publicado: 28/09/2009 9:45 am
.. jejeje!..
dato importante para la no pixelacion..
tener encuenta la ubicacion de la forma dentro del movieclip..
ademas de eso .. tener encuenta la lineas punteadas (no se como se llaman).. usando la regla en flash.. .. sirve como guia
Publicado: 05/08/2010 6:23 pm
hola, exelente explicacion, fijate que yo lo estoy haciendo con una movie y cuatro botones pero cuando llamo cada boton que valla a determinado punto de el valor «_x» tengo que ingresar el valor de inicio y como es un menu me gustaria que tomara como referencia el valor «_x» en el que esta
Publicado: 06/08/2010 12:41 am
Si deseas que la animación empieze desde la posición actual del movieclip, podrías tomar la propiedad _x que contiene esa información, entonces si deseas mover un clip llamado movie desde su posición actual hasta el pixel 650 del eje X se tendría:
var mTw = new Tween(movie, "_x", func, movie._x, 650, .5, true);De igual forma si deseas hacer una animación cambiando la transparencia de un clip se tendría:
var mTw = new Tween(movie, "_alpha", func, movie._alpha, 100, .5, true);Publicado: 16/09/2010 7:53 pm
Muy bueno, me sirvio de mucho, justo estaba viendo una web con ese efecto, gracias estoy pendiendte a otros tutoriales
Publicado: 09/04/2011 11:33 am
Tengo una duda, como podria hacer para integrar otro tween mientras se ejecuta otro (tween interpolados) Por ejemplo tengo un movieclip que dentro del eje X va del punto 0 al 900, como se haria para que al momento que este en una posicion intermedia (digamos 600) otro movieclip aparezcan de alpha 0 a alpha 100.
Muchas gracias y ojala haya podido hacerme enternder fácilmente.
Publicado: 09/04/2011 12:25 pm
Pedro si quieres utilizar varios tween en una misma animación es muy sencillo, solo tienes que agregar otra linea de código indicando el tween que deseas aplicar.
Por ejemplo si deseas mover un clip en el eje X y en el eje Y simultaneamente utilizarías.
new Tween(movie, "_x", func, 0, 100, .5, true);new Tween(movie, "_y", func, 0, 350, .5, true);
Ahora si lo que deseas es iniciar otro tween en determinada posición del animación puedes utilizar el evento onMotionChanged el cual se ejecuta cada vez que hay un cambio en la transición. Si deseas iniciar otra animación cuando la primera pasa por la posición x: 600 se tendría:
var isClip:Boolean = false;var tw:Tween = new Tween(movie, "_x", func, 200, 800, .5, true);
tw.onMotionChanged = function() {
if (this.position >= 600 && !isClip) {
new Tween(clip, "_alpha", func, 0, 100, .5, true);
isClip = true;
}
}
Notar que he utilizado una variable llamada isClip que me indica si la animación del clip se ha iniciado, esto para no iniciar repetidas veces la animación.
Hay otra alternativa para iniciar animaciónes y es esperar un determinado tiempo para lanzar la siguiente animación, para ello se hace uso de la función setTimeout. El ejemplo anterior sería:
new Tween(movie, "_x", func, 200, 800, .5, true);
setTimeout(function() {
new Tween(clip, "_alpha", func, 0, 100, .5, true);
}, 350);
En este ejemplo se espera 350 milisegundos para lanzar la siguiente animación. Esta segunda forma es mi preferida pues es sencilla y puedo colocar el el tiempo que necesito las animaciones.